<template>
  <div class="table">

    <el-card class="box-card handle-box">
      <el-button type="primary"
                 class="handle-del mr10"
                 @click="delAll">批量删除</el-button>
      <el-input v-model="select_word"
                placeholder="筛选关键词"
                class="handle-input"></el-input>
      <el-button type="primary"
                 class="btn-s"
                 @click="search">搜 索</el-button>
    </el-card>
    <el-card class="box-card container">
      <el-table :data="basedata"
                border
                class="table"
                ref="multipleTable"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55"
                         align="center"></el-table-column>
        <!-- <el-table-column type="index" width="60">
        </el-table-column> -->
        <el-table-column prop="uid"
                         label="UID"
                         width="80"
                         sortable>
        </el-table-column>
        <el-table-column prop="name"
                         label="数据名称"
                         width="200"
                         sortable>
        </el-table-column>
        <el-table-column prop="type"
                         label="数据类型"
                         width="120">
        </el-table-column>
        <el-table-column prop="cdate"
                         label="采集时间"
                         width="120"
                         sortable>
        </el-table-column>
        <el-table-column prop="cen_lon"
                         label="中心点-经度"
                         width="120">
        </el-table-column>
        <el-table-column prop="cen_lat"
                         label="中心点-纬度"
                         width="120">
        </el-table-column>
        <el-table-column prop="l_on_lon"
                         label="范围（左上角经度）"
                         min-width="180">
        </el-table-column>
        <el-table-column prop="l_on_lat"
                         label="范围（左上角纬度）"
                         width="180">
        </el-table-column>
        <el-table-column prop="r_d_lon"
                         label="范围（右下角经度）"
                         min-width="180">
        </el-table-column>
        <el-table-column prop="r_d_lat"
                         label="范围（右下角纬度）"
                         width="180">
        </el-table-column>
        <el-table-column prop="author"
                         label="采集人"
                         width="120"
                         sortable>
        </el-table-column>
        <el-table-column prop="cpath"
                         label="存放位置"
                         width="120"
                         sortable>
        </el-table-column>
        <el-table-column prop="recordp"
                         label="录入人"
                         width="120"
                         sortable>
        </el-table-column>
        <el-table-column prop="rtime"
                         label="录入时间"
                         width="120"
                         sortable>
        </el-table-column>
        <el-table-column prop="format"
                         label="数据格式"
                         width="120"
                         sortable>
        </el-table-column>
        <el-table-column prop="sname"
                         label="服务地址"
                         width="120">
        </el-table-column>
        <el-table-column prop="details"
                         label="说明信息"
                         width="300">
        </el-table-column>
        <el-table-column label="操作"
                         width="120"
                         align="center"
                         fixed="right">
          <template slot-scope="scope">
            <el-button type="info"
                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <!-- <el-button type="info" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            <!-- <el-button type="success"
                       @click="viewMap(scope.$index, scope.row)">查看</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background
                       @current-change="handleCurrentChange"
                       layout="prev, pager, next"
                       :total="1000">
        </el-pagination>
      </div>
    </el-card>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑"
               :visible.sync="editVisible">
      <el-form ref="form"
               :model="form"
               label-width="100px"
               width='800'>
        <el-row>
          <el-form-item label="UID">
            <el-input v-model="form.uid"
                      auto-complete="off"
                      :disabled="true"></el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex"
                class="row-bg">
          <el-col>
            <el-form-item label="数据名称">
              <el-input v-model="form.name"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="数据类型">
              <el-input v-model="form.type"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col>
            <el-form-item label="采集时间">
              <el-date-picker placeholder="选择日期"
                              v-model="form.cdate"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="录入时间">
              <el-date-picker placeholder="选择日期"
                              v-model="form.rtime"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex"
                class="row-bg">
          <el-col>
            <el-form-item label="中心经度">
              <el-input v-model="form.cen_lon"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="中心纬度">
              <el-input v-model="form.cen_lat"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex"
                class="row-bg">
          <el-col>
            <el-form-item label="采集人">
              <el-input v-model="form.author"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="存放位置">
              <el-input v-model="form.path"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col>
            <el-form-item label="记录人">
              <el-input v-model="form.recordp"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="数据格式">
              <el-input v-model="form.format"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex"
                class="row-bg">
          <el-col>
            <el-form-item label="范围/经纬度">
              <el-input v-model="form.coors"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="详细说明">
              <el-input type="textarea"
                        v-model="form.details"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="服务地址">
              <el-input type="textarea"
                        v-model="form.sname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示框 -->
    <el-dialog title="提示"
               :visible.sync="delVisible"
               width="300px"
               center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="delAll">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "basetable",
  data () {
    return {
      // url: "./static/vuetable.json",
      baseUrl: BASEURL,
      tableData: [],
      cur_page: 1,
      multipleSelection: [],
      select_cate: "",
      select_word: "",
      del_list: [],
      is_search: false,
      editVisible: false,
      delVisible: false,
      form: {
        uid: "",
        name: "",
        type: "",
        cdate: "",
        cen_lon: "",
        cen_lat: "",
        l_on_lon: "",
        l_on_lat: "",
        r_d_lon: "",
        r_d_lat: "",
        author: "",
        cpath: "",
        recordp: "",
        rtime: "",
        format: "",
        details: "",
        sname: ""
      },
      idx: -1
    };
  },
  created () {
    this.getData();
  },
  computed: {
    basedata () {
      return this.tableData.filter(d => {
        let is_del = false;
        for (let i = 0; i < this.del_list.length; i++) {
          if (d.name === this.del_list[i].name) {
            is_del = true;
            break;
          }
        }
        if (!is_del) {
          if (
            d.type.indexOf(this.select_word) > -1 ||
            d.name.indexOf(this.select_word) > -1 ||
            d.recordp.indexOf(this.select_word) > -1 ||
            d.format.indexOf(this.select_word) > -1
          ) {
            return d;
          }
        }
      });
    }
  },
  methods: {
    // 分页导航
    handleCurrentChange (val) {
      this.cur_page = val;
      this.getData();
    },
    // 获取 easy-mock 的模拟数据
    getData () {
      // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
      // if (process.env.NODE_ENV === "development") {
      //   this.url = "/ms/table/list";
      // }
      // this.$axios.get(this.url).then(res => {
      //   this.tableData = res.data.list;
      //   console.log(res);
      // });
      debugger
      let q_url = this.baseUrl + "/getbasedata";
      this.$axios.get(q_url).then(res => {
        this.tableData = res.data;
        // console.log(this.tableData);
      });
    },
    search () {
      this.is_search = true;
    },
    formatter (row, column) {
      return row.address;
    },
    filterTag (value, row) {
      return row.tag === value;
    },
    handleEdit (index, row) {
      this.idx = index;
      const item = this.tableData[index];
      this.form = {
        uid: item.uid,
        name: item.name,
        type: item.type,
        cdate: item.cdate,
        cen_lon: item.cen_lon,
        cen_lat: item.cen_lat,
        l_on_lon: item.l_on_lon,
        l_on_lat: item.l_on_lat,
        r_d_lon: item.r_d_lon,
        r_d_lat: item.r_d_lat,
        author: item.author,
        cpath: item.cpath,
        recordp: item.recordp,
        rtime: item.rtime,
        format: item.format,
        sname: item.sname,
        details: item.details
      };
      this.editVisible = true;
    },
    handleDelete (index, row) {
      this.idx = index;
      this.delVisible = true;
    },
    viewMap (index, row) {
      // debugger
      // if (index <= 3) {
      //   debugger
      //   this.$router.push({ path: "/map", query: { type: 1 } });
      // } else if (index > 3 && index < 8) {
      //   this.$router.push({ path: "/map", query: { type: 2 } });
      // } else {
      //   this.$router.push({ path: "/map", query: { type: 3 } });
      // }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    // 保存编辑
    saveEdit () {
      this.$set(this.tableData, this.idx, this.form); // $set 用来修改刷新视图 form的值刷新 table 下的值
      this.editVisible = false;
      // 先更新页面视图，再往数据库写入数据
      let update_url = this.baseUrl + "/updateRecord";  // 更新数据
      // 获取所有更新完之后的数据
      let data = JSON.stringify(this.form);
      let postData = this.$qs.stringify({
        "uid": this.form.uid,
        "record": data
      });
      this.$axios({
        method: "post",
        url: update_url,
        data: postData
      }).then(res => {
        this.$message.success(`修改第 ${this.idx} 行成功`);
      });
    },
    // 确定删除
    // deleteRow() {
    //     this.tableData.splice(this.idx, 1);
    //     let uid = this.idx;
    //     let postData = this.$qs.stringify({
    //         uid: uid
    //     });
    //     let del_url = this.url + "/delete";
    //     this.$axios({
    //         method: "post",
    //         url: del_url,
    //         data: postData
    //     }).then(res => {
    //         this.$message.success(`删除第 ${uid} 行成功`);
    //     });
    //     this.$message.success("删除成功");
    //     this.delVisible = false;
    // },
    delAll () {
      const length = this.multipleSelection.length;
      let str = "";
      this.del_list = this.del_list.concat(this.multipleSelection);
      let id_list = "";
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + " ";
        id_list += this.del_list[i].id + ",";
      }
      let postData = this.$qs.stringify({
        id_list: id_list
      });
      let del_url = this.baseUrl + "/delete";
      this.$axios({
        method: "post",
        url: del_url,
        data: postData
      }).then(res => {
        this.$message.success(`删除成功 ` + str);
      });
      this.multipleSelection = [];
    }
  }
};
</script>

<style lang='scss' scoped>
.btn-s {
  width: 80px;
}
.handle-select {
  width: 120px;
}

.handle-input {
  width: 500px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.handle-box {
  padding: 0px;
}
.container {
  padding: 0px;
}
.table {
  font-size: 12px;
}

.el-table__body-wrapper {
  min-height: 600px;
}
.el-table {
  min-height: 600px;
}
</style>
